<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson 6</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>
<script src="https://unpkg.com/vue@next"></script>
<script>
    // 生命周期函数: 在某一时刻会自动执行的函数
    const app=Vue.createApp({
        data(){
            return{
              message:'hello world'  
            }
        },
        methods:{
            handleItemClick(){
                alert('click')
            }
        },
        // 在实例生成之前自动执行的函数
        beforeCreate(){
            console.log("beforeCreate");
        },
        // 在实例生成之后自动执行的函数
        created(){
            console.log("created");
        },
        // 在组件内容被渲染到页面之前自动执行的函数
        beforeMount(){
            // console.log(document.getElementById('root').innerHTML,'beforeMount')
            console.log("beforeMount");
        },
        // 在组件内容被渲染到页面之后自动执行的函数
        mounted(){
            // console.log(document.getElementById('root').innerHTML,'mounted')
            console.log("mounted");
        },
        // 当data中的数据发生变化时会自动执行的函数
        beforeUpdate(){
            console.log("beforeUpdate");
        },
        // 当data中的数据发生变化,同时页面完成更新后,会自动执行的函数
        updated(){
            console.log("updated");
        },
        // 当vue应用失效时,会自动执行的函数
        beforeUnmount(){
            console.log("beforeUnmount");
        },
        // 当vue应用失效时,且dom完全销毁之后,会自动执行的函数
        unmounted(){
            console.log("unmounted");
        },
        template:"<div v-on:click='handleItemClick'>{{message}}</div>"
    });
    const vm = app.mount('#root')
</script>